<template>
	<view class="orderMain" :style="{'min-height': (getH()-44)+'px'}">
		<view class="Address" @click="toSelect()">
			<view class="texts">
				<img src="../../static/icon/adress.png" alt="">
				<text>{{site}}</text>
			</view>
			<view class="arrowsRight">
				<img src="../../static/icon/right.png" alt="">
			</view>
		</view>
		 
		<view class="goods" v-for="item in goods" :key="item.id">
			<view class="msg">
				<view class="imgs">
					<img src="../../static/imgs/msd.jpg" alt="">
				</view>
				<view class="titles">
					<h5>{{item.name}}</h5>
					<view class="count">
						<h4 style="color: #E43D33;">￥{{item.price}}</h4>
					</view>
				</view>
			</view>
		</view>
		
		<view class="totals">
			<text>价格明细</text>
			<view class="money">
				<text>商品总价&nbsp;共{{count}}件宝贝</text>
				<text class="num">￥{{total}}</text>
			</view>
		</view>
		<view class="btns">
			<button type="default" @click="upOrders()" ref="upOrder">提交订单</button>
		</view>
		<safeKey :show="showKeyBoard" :have_pawd="have_pawd" @hide="close()" @change="enterSuccess" />
		<!-- <payKeyboard v-if="showKeyBoard" title="请输入支付密码" @success="enterSuccess" @close="close"></payKeyboard> -->
		<view class="other">
			<text>已经到底啦~</text>
		</view>
		<uni-data-picker 
		v-show="isShow"
		collection="opendb-city-china"
		popup-title="请选择接种点"
		ref="picker"
		@change="onchange">
		</uni-data-picker>
	</view>
	
</template>

<script>
	// import payKeyboard from '@/components/mi-payKeyboard/mi-payKeyboard.vue'
	 import safeKey from "@/components/jiangbei-safekey/jiangbei-safekey.vue"
	export default {
		data() {
			return {
				ids:[],
				showKeyBoard:false,
				count:0,
				site:'',
				isShow:false,
				have_pawd:true,
				pwdcount:0,
				timer:null,
				goods:[
					{
						createTime:'2022-3-17 13:45:36',
						name:'新冠疫苗',
						price:3299,
					}
				],
				items: [{
				          text: "金牛区",
				          value: "1",
				          children: [
				            {
				              text: "a街道",
				              value: "4"
				            },
				            {
				              text: "b街道",
				              value: "5"
				            }
				          ]
				        },
				        {
				          text: "青羊区",
				          value: "2"
				        },
				        {
				          text: "武侯区",
				          value: "3"
				        }]
			}
		},
		components:{safeKey},
		computed:{
			total(){
				return 0
			}
		},
		methods: {
			//输入密码正确
			enterSuccess(pwd){
					var str=''
					pwd.number.forEach((item)=>{
						str+=item
					})
					if(str==='248613'){
						this.showKeyBoard=false
						uni.navigateTo({
							url:"../success/success"
						})
					}else{
						uni.showToast({
							title: '输入密码错误',
							duration: 2000,
							icon:'error'
						});
					}
				
			},
			//返回
			close(){
				this.showKeyBoard=false
			},
			// 选择地址
			toSelect(){
				this.$refs.picker.clear()
				this.isShow=true
				this.$refs.picker.show() 
			},
			getH(){
				return window.screen.height; 
			},
			// 提交订单
			upOrders(){
				this.showKeyBoard=true
			},
			onchange(e) {
				this.site=""
			    console.log(e.detail.value)
				e.detail.value.forEach((item,index)=>{
					
					if(index==e.detail.value.length-1){
						this.site=this.site+item.text
					}else{
						this.site=this.site+item.text+'-'
					}
				})
				this.site.substring(1, this.site.length - 1);
				this.isShow=false
			},
			onnodeclick(node) {}
		},
		onLoad({ids}){
			this.ids=String(ids).split(",")
			console.log(this.ids)
		}
	}
</script>

<style scoped lang="scss">
	
	.orderMain{
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: #eee;
		.other{
			height: 90px;
			text-align: center;
			margin-top: 15px;
			color: #aaa;
		}
		.Address{
			width: 85%;
			padding: 20px;
			height: 60px;
			background-color: #FFFFFF;
			border-radius: 20px;
			margin: 10px 0;
			display: flex;
			justify-content: space-between;
			
			.texts{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0px 20px;
				img{
					width: 20px;
					height: 20px;
					margin-right: 10px;
				}
			}
			.arrowsRight{
				display: flex;
				align-items: center;
				padding: 0px 20px;
				img{
					width: 20px;
					height: 20px;
				}
			}
			
		}
		.goods{
			width: 85%;
			background-color: #FFFFFF;
			border-radius: 20px;
			margin: 10px 0;
			padding: 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.waybill{
				font-size: 14px;
				color: #999999;
				padding: 10px 0;
			}
			.msg{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				.imgs{
					img{
						width: 80px;
						height: 80px;
						margin-left: 20px;
					}
				}
				.titles{
					padding: 0 10px;
					display: flex;
					align-items: center;
					flex-direction: column;
					h5{
						padding: 10px 0;
					}
					.count{
						padding: 10px 0;
						display: flex;
						justify-content: space-between;
						h4{
							padding: 0 10px;
						}
						.input{
							width: 50%;
							text-align: center;
						}
					}
				}
			}
		}
		.totals{
			width: 85%;
			background-color: #FFFFFF;
			border-radius: 20px;
			margin: 10px 0;
			padding: 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			text{
				font-size: 18px;
				font-weight: bolder;
			}
			.money{
				display: flex;
				justify-content: space-between;
				text{
					font-size: 14px;
					font-weight: 400;
					color: #999;
				}
				.num{
					font-size: 16px;
					color: #E43D33;
				}
				
			}
		}
	.btns{
		width: 100%;
		height: 50px;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		button{
			width: 50%;
			background: linear-gradient(to right,rgb(255, 123, 0),rgb(255,68,0));
			color: #FFFFFF;
			border-radius: 30px;
		}
	}
	.popup{
		.pwdInput{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
	
	}
</style>
